<template >
	<div class="contain-login">
		<div class="login-form">
			<div class="login-header">
				绿色包装经济化实验测试<br>
				指导平台
			</div>
			<div class="login-body">
				<p style="color: #999;margin: 20px 0">用户登录</p>
				<el-form ref="form"  label-width="0px" :model="form" :rules="rules">
					<el-form-item prop="phone">
						<el-input placeholder="请输入手机号" v-model="form.phone">
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input placeholder="请输入密码" style="margin-top: 20px" type="password" v-model="form.password">
						</el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="login-btn">
				<div class="btn" @click="getInHome('form')">登 录</div>
			</div>
			<div class="login-btn" style="margin-top: 20px">
				<el-button type="text" @click="getInStudent">注册账号</el-button>
				<el-button type="text"  @click="getInLogon">手机号注册</el-button>
			</div>
		</div>
	</div>
</template >

<script >
	import { userLogin } from "../api/login";

    export default {
        name: "Login",
        data(){
            return{
                form:{
                    phone:'',
                    password:''
                },
                rules: {
                    phone: [
                        {required: true, message: '请输入账户', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入账户密码', trigger: 'blur'},
                    ],
                }
            }
        },
        methods:{
            //手机注册页
            getInLogon(){
                this.$router.replace('/logon')
            },
			//学号注册
			getInStudent(){
                this.$router.replace('/studentCode')
			},
            //	登录成功
            //	登录成功
            getInHome(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        userLogin(this.form).then(res => {
                            if (res.data.code === 200){
                                this.$message.success(res.data.message)
                                window.sessionStorage.setItem('user',JSON.stringify(res.data.data.user))
                                window.sessionStorage.setItem('token',res.data.data.tokenInfo.tokenValue)
                                this.$router.replace('/home')
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script >

<style scoped lang="less">
	.contain-login{
		position: relative;
		width: 100vw;
		height: 100vh;
		background: url("../assets/images/banner.png") no-repeat center;
		background-size: 100%;
		.login-form{
			position: absolute;
			right: 15%;
			top: 50%;
			transform: translateY(-50%);
			width: 20vw;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			.login-header{
				width: 100%;
				text-align: center;
				font-size: 28px;
				letter-spacing: 1px;
				color: #4e667c;
				font-weight: 500;
				line-height: 50px;
			}
			.login-body{
				width: 100%;
				margin: 10% 0;
				/deep/.el-form-item{
					margin-bottom: 0;
					
				}
				/deep/.el-input__inner{
					border: none;
					border-radius: 20px;
				}
			}
			.login-btn{
				width: 100%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				.btn{
					width: 100%;
					height: 40px;
					border-radius: 20px;
					text-align: center;
					line-height: 40px;
					color: #fff;
					background-image: linear-gradient(to top, #2eddda 0%, #2fa0e7 100%);
					&:hover{
						cursor: pointer;
					}
				}
			}
		}
	}
</style >
